<template>
  <div class="container overflow-x-auto max-w-screen-md mx-auto p-3">
    <n-card class="min-w-fit ">
      <div class="w-full">
        <h2 class="text-center font-mono">目前共计{{ total }}个分类</h2>
        <n-divider></n-divider>
        <div class="flex justify-between overflow-hidden">
          <div>
            <n-timeline >
              <n-timeline-item type="success" v-for="(item,index) in list" :key="index">
                <n-button @click="handleCategory(item.name)" text>
                  {{ item.name }}
                </n-button>
              </n-timeline-item>
            </n-timeline>
          </div>
          <div class="h-screen flex-1 overflow-hidden">
            <n-scrollbar>
              <TimeLinePostList :and-params="andParams" :order-params="orderParams"></TimeLinePostList>
            </n-scrollbar>
          </div>
        </div>
      </div>
    </n-card>
  </div>
</template>

<script setup lang="ts">


import {onMounted, ref} from "vue";
import api from "@/api";
import TimeLinePostList from "@/components/pc/list/TimeLinePostList.vue";

const list = ref<ICategory[]>([])
const total = ref(0)

onMounted(() => {
  getCategoryList()
})
const andParams = ref({
  visibility: 'public',
  categoryName: ''
})
const orderParams = ref({
  createdAt: '降序',
  updatedAt: '',
  comments: '',
  views: ''
})
const getCategoryList = () => {
  api.category.queryList({
    pageNo: 1,
    pageSize: 999,
  }).then(res => {
    list.value = res.data.data.records as []
    total.value = res.data.data.total
    andParams.value.categoryName = list.value[0].name
  })
}

const handleCategory = (name: string) => {
  andParams.value.categoryName = name
}
</script>

<style scoped>

</style>